<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>6. Vue移动端 频道列表编辑操作 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue频道列表(Vant动作面板) 频道编辑操作(添加 删除):::">
<meta property="og:type" content="article">
<meta property="og:title" content="6. Vue移动端 频道列表编辑操作">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/10/Vue_Mobile_Projects/7_Channel/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue频道列表(Vant动作面板) 频道编辑操作(添加 删除):::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-09T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.546Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">6. Vue移动端 频道列表编辑操作</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-10</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~13.92K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178546"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue频道列表(Vant动作面板) 频道编辑操作(添加 删除)<br><br>:::</p>
<span id="more"></span>

<blockquote>
<p>需求：登录的用户，可以选择喜欢的频道</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/b9LWE7oJdM4eDKn.png" alt="image-20210611083432783"></p>
<h2 id="获取父组件的频道数据-渲染到编辑模板-ChannelEdit-vue"><a href="#获取父组件的频道数据-渲染到编辑模板-ChannelEdit-vue" class="headerlink" title="获取父组件的频道数据 渲染到编辑模板 ChannelEdit.vue"></a>获取父组件的频道数据 渲染到编辑模板 <code>ChannelEdit.vue</code></h2><blockquote>
<p>目标：实现频道组件基本布局 (Vant底部弹出层)</p>
<p>效果：实现频道列表 基本样式  获取用具频道数据 实现主题样式</p>
</blockquote>
<h3 id="封装独立的频道编辑-子组件ChannelEdit-vue"><a href="#封装独立的频道编辑-子组件ChannelEdit-vue" class="headerlink" title="封装独立的频道编辑 子组件ChannelEdit.vue"></a><big>封装独立的频道编辑 子组件<code>ChannelEdit.vue</code></big></h3><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet">Vant动作面板 ActionSheet</a></p>
<blockquote>
<p>组件路径：<code>src/components/ChannelEdit.vue</code> 创建独立的组件文件</p>
</blockquote>
<ul>
<li><code>template</code> 模板样式<ul>
<li><ol>
<li>需要设置 用户当前选中的频道高亮 (动态添加类名 <code>:class</code>)</li>
<li>需要设置 保留推荐频道 不能删除 (排除索引为0的内容 动态显示 <code>v-show</code>)</li>
</ol>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- @closed=&quot;editing=false&quot; 关闭屉式菜单  重置编辑状态为不编辑  @input=&quot;$emit(&#x27;input&#x27;, $event)&quot; --&gt;</span><br><span class="line">  &lt;van-action-sheet :value=&quot;value&quot; @closed=&quot;editing=false&quot; @input=&quot;input&quot; title=&quot;编辑频道&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;channel&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;tit&quot;&gt;</span><br><span class="line">        我的频道：</span><br><span class="line">        &lt;span class=&quot;tip&quot;&gt;点击可进入频道&lt;/span&gt;</span><br><span class="line">        &lt;van-button v-if=&quot;!editing&quot; @click=&quot;editing=true&quot; size=&quot;mini&quot; type=&quot;info&quot; plain&gt;编辑&lt;/van-button&gt;</span><br><span class="line">        &lt;van-button v-else @click=&quot;editing=false&quot; size=&quot;mini&quot; type=&quot;danger&quot; plain&gt;完成&lt;/van-button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;van-grid class=&quot;van-hairline--left&quot;&gt;</span><br><span class="line">        &lt;van-grid-item v-for=&quot;(item,index) in channels&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">          &lt;!-- 添加当前选中频道的高亮类名(用户当前选中的频道 让其高亮显示)</span><br><span class="line">                :class 动态添加高亮类名 类名对象里面三元表达式 判断符合父元素传来的当前索引 让其添加高亮类名 --&gt;</span><br><span class="line">          &lt;span :class=&quot;&#123;red : index === activeindex&#125;&quot; class=&quot;f12&quot;&gt;&#123;&#123;item.name&#125;&#125;&lt;/span&gt;</span><br><span class="line">          &lt;!-- 至少留一个推荐频道(第一个频道 索引为0)</span><br><span class="line">                :show动态隐藏显示 除了索引值为0(推荐频道) 其他都显示删除按钮 --&gt;</span><br><span class="line">          &lt;van-icon v-show=&quot;editing &amp;&amp; index!==0&quot; class=&quot;btn&quot; name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">        &lt;/van-grid-item&gt;</span><br><span class="line">      &lt;/van-grid&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;channel&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;tit&quot;&gt;可选频道：&lt;/div&gt;</span><br><span class="line">      &lt;van-grid class=&quot;van-hairline--left&quot;&gt;</span><br><span class="line">        &lt;van-grid-item v-for=&quot;index in 8&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">          &lt;span class=&quot;f12&quot;&gt;频道&#123;&#123;index&#125;&#125;&lt;/span&gt;</span><br><span class="line">          &lt;van-icon class=&quot;btn&quot; name=&quot;plus&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">        &lt;/van-grid-item&gt;</span><br><span class="line">      &lt;/van-grid&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/van-action-sheet&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本内容</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 导入父组件传来的数据</span></span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="comment">// 控制弹窗组件的显示</span></span><br><span class="line">    <span class="attr">value</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="title class_">Boolean</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 我的频道数据</span></span><br><span class="line">    <span class="attr">channels</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="title class_">Array</span></span><br><span class="line">       <span class="comment">//! 表示数组的默认值是空数组[]</span></span><br><span class="line">      <span class="attr">default</span>: <span class="function">() =&gt;</span> []</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当前频道的索引(选中的频道)</span></span><br><span class="line">    <span class="attr">activeindex</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="title class_">Number</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// 叉号的显示对象</span></span><br><span class="line">      <span class="attr">editing</span>: <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 会父组件传值 关闭频道编辑窗口</span></span><br><span class="line">    handleClose () &#123;</span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;input&#x27;</span>, <span class="literal">false</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>style</code> 样式设置</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&quot;less&quot; scoped&gt;</span><br><span class="line"><span class="selector-class">.van-popup--bottom</span> &#123;</span><br><span class="line">  &amp;<span class="selector-class">.van-popup--round</span> &#123;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.van-action-sheet</span> &#123;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="selector-class">.van-action-sheet__header</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#3296fa</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="selector-class">.van-icon-close</span> &#123;</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.channel</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="selector-class">.tit</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">3</span>;</span><br><span class="line">    <span class="selector-class">.tip</span> &#123;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">10px</span>;</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.van-button</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">7px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.btn</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.f12</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.red</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="父组件-传入频道数据给子组件main-vue"><a href="#父组件-传入频道数据给子组件main-vue" class="headerlink" title="父组件 传入频道数据给子组件main.vue"></a>父组件 传入频道数据给子组件<code>main.vue</code></h3><ul>
<li>导入频道数据编辑子组件 <code>script 导入</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入 频道编辑操作组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ChannelEdit</span> <span class="keyword">from</span> <span class="string">&#x27;../../components/ChannelEdit&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>设置控制 频道编辑 显示的对象 <code>scrpit脚本 data()储存数据</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 控制编辑频道弹窗的显示和隐藏</span></span><br><span class="line">      <span class="attr">isEdit</span>: <span class="literal">false</span>,</span><br></pre></td></tr></table></figure>

<ul>
<li>设置父组件传递数据给子组件(频道列表 和 当前选中频道列表的数据)</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?编辑频道组件 给组件传入 频道列表 和 当前选中频道列表的数据 --&gt;</span><br><span class="line">&lt;ChannelEdit v-model=&#x27;isEdit&#x27; :channels=&#x27;channels&#x27; :activeindex=&#x27;active&#x27;&gt;&lt;/ChannelEdit&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>控制弹窗的显示和隐藏</li>
<li>父子组件的数据传递</li>
<li>v-model在组件上的用法</li>
<li>父组件向子组件传值</li>
<li>属性的类型检测</li>
<li>类的绑定用法</li>
</ol>
</blockquote>
<h2 id="渲染可选频道ChannelEdit-vue"><a href="#渲染可选频道ChannelEdit-vue" class="headerlink" title="渲染可选频道ChannelEdit.vue"></a>渲染可选频道<code>ChannelEdit.vue</code></h2><blockquote>
<p>目标：渲染可选频道</p>
<p>效果: 除了已经选中的频道 在底部添加可选频道  </p>
<p>原理: 所有频道 减去 用户当前拥有的频道 得出用户还没有获得的频道</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/60c37411844ef46bb2af8686.jpg"></p>
<h3 id="封装可选频道-api接口-api文件夹-channel-js"><a href="#封装可选频道-api接口-api文件夹-channel-js" class="headerlink" title="封装可选频道 api接口 api文件夹 channel.js"></a>封装可选频道 api接口 <code>api文件夹 channel.js</code></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 设置获取 全部频道数据</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getChannels</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/channels&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="组件中调用方法获取全部频道数据-ChannelEdit-vue"><a href="#组件中调用方法获取全部频道数据-ChannelEdit-vue" class="headerlink" title="组件中调用方法获取全部频道数据 ChannelEdit.vue"></a>组件中调用方法获取全部频道数据 <code>ChannelEdit.vue</code></h3><blockquote>
<p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet">Vant 动作面板</a></p>
</blockquote>
<ul>
<li><code>template</code>模板 <ul>
<li>添加 @open 打开动作面板 开始触发指令(Vant方法) 让其打开时候 获取数据</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--？ Vant动作模板支持 @opne 打开动作模板后触发方法 --&gt;</span><br><span class="line"> &lt;van-action-sheet @open=&#x27;handleOpen&#x27; :value=&quot;value&quot; @closed=&quot;editing=false&quot; @input=&quot;handleClose&quot; title=&quot;编辑频道&quot;&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本 <ul>
<li>导入获取所有频道的api接口</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入获取全部频道数据删除频道 添加频道 的api接口</span></span><br><span class="line"><span class="keyword">import</span> &#123; getChannels, delChannel, addChannel &#125; <span class="keyword">from</span> <span class="string">&#x27;../api/channel&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本 <code>methods:</code> 函数方法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 打开动作模板后执行的方法</span></span><br><span class="line">  <span class="keyword">async</span> handleOpen () &#123;</span><br><span class="line">    <span class="comment">// ? 调用接口获取所有的频道数据</span></span><br><span class="line">    <span class="comment">// ? 判断 如果获取成功 得到数据 不成功提示用户</span></span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">getChannels</span>()</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">allChannels</span> = ret.<span class="property">data</span>.<span class="property">channels</span></span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="comment">// ? 不成功 提示用户</span></span><br><span class="line">      <span class="variable language_">this</span>.$toast(<span class="string">&#x27;获取频道列表失败&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>已经拥有【我的频道】和【全部频道】数据</li>
<li>基于上述两种频道计算【可选频道】数据</li>
<li>弹窗打开时触发加载全部频道的动作（基于Vant组件的事件open）</li>
</ol>
<h3 id="设置频道计算方法-获取用户未添加的频道ChannelEdit-vue"><a href="#设置频道计算方法-获取用户未添加的频道ChannelEdit-vue" class="headerlink" title="设置频道计算方法 获取用户未添加的频道ChannelEdit.vue"></a>设置频道计算方法 获取用户未添加的频道<code>ChannelEdit.vue</code></h3><ul>
<li>根据 【全部频道】 和 【我的频道】 得到 【可选频道】<ul>
<li>可选频道 &#x3D; 全部频道  -  我的频道</li>
</ul>
</li>
<li>利用<code>filter()</code> 筛选方法(可创先新数组) 和 <code>some()</code>(单纯筛选) 数组方法实现</li>
</ul>
<blockquote>
<p><code>script</code>脚本 <code>computed:</code>计算属性</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 添加计算属性</span></span><br><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">  <span class="comment">// ? 添加计算方法 总频道列表 比对 用户已经关注的列表 得出用户还没有关注的频道</span></span><br><span class="line">  optionChannels () &#123;</span><br><span class="line">    <span class="comment">// ? 进行筛选 filter方法进行数据总筛选 接收some() some传来的true为取反 代表不存在的数据为true filter方法储存不存在的数据即可</span></span><br><span class="line">    <span class="comment">// ? filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</span></span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">allChannels</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123; <span class="comment">// allChannels 是全部频道数据 channels是我的频道数据</span></span><br><span class="line">      <span class="comment">// ? 进行符合条件筛选 some() 并且取反 把不满足条件的取反变成true 返回给filter()筛选器</span></span><br><span class="line">      <span class="comment">// ?  some()方法作用：判断数组中是否包含符合条件的数据，只要有一项符合，就返回true</span></span><br><span class="line">      <span class="keyword">return</span> !<span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">some</span>(<span class="function"><span class="params">items</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// ? 比对 filter的数据 返回true</span></span><br><span class="line">        <span class="keyword">return</span> items.<span class="property">id</span> === item.<span class="property">id</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code>模板 渲染计算后的数据</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;channel&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;tit&quot;&gt;可选频道：&lt;/div&gt;</span><br><span class="line">  &lt;van-grid class=&quot;van-hairline--left&quot;&gt;</span><br><span class="line">    &lt;van-grid-item v-for=&quot;items in optionChannels&quot; :key=&quot;items.id&quot;&gt;</span><br><span class="line">      &lt;span class=&quot;f12&quot;&gt;&#123;&#123;items.name&#125;&#125;&lt;/span&gt;</span><br><span class="line">      &lt;van-icon class=&quot;btn&quot; name=&quot;plus&quot;&gt;&lt;/van-icon&gt;</span><br><span class="line">    &lt;/van-grid-item&gt;</span><br><span class="line">  &lt;/van-grid&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>计算可选频道（算法）</li>
<li>动态渲染可选频道数据</li>
</ol>
<h2 id="点击进入频道-ChannelEdit-vue"><a href="#点击进入频道-ChannelEdit-vue" class="headerlink" title="点击进入频道 ChannelEdit.vue"></a>点击进入频道 <code>ChannelEdit.vue</code></h2><blockquote>
<p>目标：控制点击进入频道</p>
<p>效果: 点击不同频道时候 进入相应频道文章列表中 (子传父)</p>
</blockquote>
<h3 id="子组件点击后获取频道索引-传父组件-ChannelEdit-vue"><a href="#子组件点击后获取频道索引-传父组件-ChannelEdit-vue" class="headerlink" title="子组件点击后获取频道索引 传父组件 ChannelEdit.vue"></a>子组件点击后获取频道索引 传父组件 <code>ChannelEdit.vue</code></h3><ul>
<li><code>template模板</code> 事件绑定 <ul>
<li>@click 设置点击事件 传入其索引参数</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ? @click 创建点击事件 携带点击频道的id值(参数) 传给父组件 实现点击后切换到该频道 --&gt;</span><br><span class="line">&lt;span :class=&quot;&#123;red : index === activeindex&#125;&quot; class=&quot;f12&quot; @click=&quot;enterChannel(index)&quot;&gt;&#123;&#123;item.name&#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script </code> 脚本 <code>methods:</code>函数方法<ul>
<li>设置<code>$emit</code> 给父组件对应频道的索引值 和 关闭动作面板 布尔值</li>
<li>设置 <code>.sync $emit(&#39;update:xxx)</code> 互传简写方法</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 接收点击频道的id值 创给子组件 实现点击频道后 跳转到该频道</span></span><br><span class="line">    enterChannel (index) &#123;</span><br><span class="line">      <span class="comment">// ? 1、关闭窗口</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;input&#x27;</span>, <span class="literal">false</span>)</span><br><span class="line">      <span class="comment">// ? 这里需要把index传递给父组件并且给active赋值</span></span><br><span class="line">      <span class="variable language_">this</span>.$emit(<span class="string">&#x27;update:activeindex&#x27;</span>, index)</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<h3 id="父组件监听事件-跳转指定文章列表main-vue"><a href="#父组件监听事件-跳转指定文章列表main-vue" class="headerlink" title="父组件监听事件 跳转指定文章列表main.vue"></a>父组件监听事件 跳转指定文章列表<code>main.vue</code></h3><ul>
<li><code>template</code>模板 <ul>
<li><code>.sync $emit(&#39;update:xxx)</code>  双向绑定数据 直接可以获取索引值 无需设置方法</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?编辑频道组件 接收子组件传来的数据 --&gt;</span><br><span class="line">&lt;ChannelEdit @addChannel=&#x27;addChannel&#x27; @delChannel=&#x27;delChannel&#x27; v-model=&#x27;isEdit&#x27; :channels=&#x27;channels&#x27; :activeindex.sync=&#x27;active&#x27;&gt;&lt;/ChannelEdit&gt;</span><br></pre></td></tr></table></figure>

<h3 id="简写方法-sync-emit-39-update-xxx"><a href="#简写方法-sync-emit-39-update-xxx" class="headerlink" title="简写方法 .sync $emit(&#39;update:xxx)"></a>简写方法 <code>.sync $emit(&#39;update:xxx)</code></h3><ul>
<li>父子组件之间传值的简化写法<ul>
<li>父向子传值  :属性名称 （:activeIndex&#x3D;”active”）</li>
<li>子向父传值  @自定义事件名称 （@update-index&#x3D;”active&#x3D;$event”）</li>
<li>合并的写法  <code>:activeIndex.sync=&quot;active&quot;</code></li>
<li>要求：子组件触发事件</li>
</ul>
</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">    enterChannel (index) &#123;</span><br><span class="line">      this.$emit(&#x27;input&#x27;, false)</span><br><span class="line"><span class="deletion">-     this.$emit(&#x27;update-index&#x27;, index)</span></span><br><span class="line"><span class="addition">+     this.$emit(&#x27;update:activeIndex&#x27;, index)</span></span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">    &lt;edit-channel</span><br><span class="line">      v-model=&quot;showEditChannel&quot;</span><br><span class="line">      :channels=&quot;channels&quot;</span><br><span class="line">-      @update-index=&quot;active=$event&quot;</span><br><span class="line">-      :activeIndex=&quot;active&quot;&gt;</span><br><span class="line">+      :activeIndex.sync=&quot;active&quot;&gt;</span><br><span class="line">    &lt;/edit-channel&gt;</span><br></pre></td></tr></table></figure>

<p>总结</p>
<ol>
<li>如果希望传递给子组件的属性是双向绑定的，可以再属性的后面添加.sync即可，但是有一个要求：子组件触发的事件<strong>必须</strong>是如下的格式 update:属性名称</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.$emit(<span class="string">&#x27;update:activeIndex&#x27;</span>, index)</span><br></pre></td></tr></table></figure>



<h2 id="删除我的频道-ChannelEdit-vue"><a href="#删除我的频道-ChannelEdit-vue" class="headerlink" title="删除我的频道 ChannelEdit.vue"></a>删除我的频道 <code>ChannelEdit.vue</code></h2><blockquote>
<p>目标：实现删除我的频道功能</p>
<p>效果: 点击删除按钮后 删除改频道 并且通知服务器 该频道已删除</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/60c37cd9844ef46bb289049d.jpg"></p>
<h3 id="封装上传频道-api接口-api文件夹-channel-js"><a href="#封装上传频道-api接口-api文件夹-channel-js" class="headerlink" title="封装上传频道 api接口 api文件夹 channel.js"></a>封装上传频道 api接口 <code>api文件夹 channel.js</code></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 设置删除 用户的频道数据</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">delChannel</span> = <span class="keyword">async</span> (<span class="params">channelId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;delete&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/user/channels/&#x27;</span> + channelId</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="子组件上传删除频道-传值给父组-通知删除ChannelEdit-vue"><a href="#子组件上传删除频道-传值给父组-通知删除ChannelEdit-vue" class="headerlink" title="子组件上传删除频道 传值给父组 通知删除ChannelEdit.vue"></a>子组件上传删除频道 传值给父组 通知删除<code>ChannelEdit.vue</code></h3><ul>
<li><code>template</code> 模板 <ul>
<li>绑定删除频道事件 携带删除频道的id值 进行删除</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ~ @click 点击事件 删除频道方法 携带频道id 用于服务器删除 携带索引值 用于页面删除  --&gt;</span><br><span class="line">   &lt;van-icon @click=&#x27;handleDelete(item.id)&#x27; v-show=&quot;editing &amp;&amp; index!==0&quot; class=&quot;btn&quot; name=&quot;cross&quot;&gt;&lt;/van-icon&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本<ul>
<li>导入删除api接口文件</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入获取全部频道数据删除频道 添加频道 的api接口</span></span><br><span class="line"><span class="keyword">import</span> &#123; getChannels, delChannel, addChannel &#125; <span class="keyword">from</span> <span class="string">&#x27;../api/channel&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> 函数方法<ul>
<li>获取id值 上传删除频道id给服务器</li>
<li>把频道id值创给父组件 让父组件在页面删除该频道</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 添加删除频道功能方法</span></span><br><span class="line"><span class="keyword">async</span> handleDelete (id) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// ~ 通知服务器 进行频道删除</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">delChannel</span>(id)</span><br><span class="line">    <span class="comment">// ~ 删除成功后 把id值创给父组件 通知父组件在页面上进行删除</span></span><br><span class="line">    <span class="variable language_">this</span>.$emit(<span class="string">&#x27;delChannel&#x27;</span>, id)</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="comment">// ~ 提示用户 删除失败</span></span><br><span class="line">    <span class="variable language_">this</span>.$toast(<span class="string">&#x27;频道删除失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="父组件监听事件-进行删除频道-main-vue"><a href="#父组件监听事件-进行删除频道-main-vue" class="headerlink" title="父组件监听事件 进行删除频道 main.vue"></a>父组件监听事件 进行删除频道 <code>main.vue</code></h3><ul>
<li><code>template</code> 模板<ul>
<li>导入要删除频道的id值</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?编辑频道组件 接收子组件传来的数据 --&gt;</span><br><span class="line">  &lt;ChannelEdit @addChannel=&#x27;addChannel&#x27; @delChannel=&#x27;delChannel&#x27; v-model=&#x27;isEdit&#x27; :channels=&#x27;channels&#x27; :activeindex.sync=&#x27;active&#x27;&gt;&lt;/ChannelEdit&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> 函数方法<ul>
<li>使用 <code>findIndex()</code>方法 查询删除频道 所在的 总频道列表索引值</li>
<li><code>splice()</code>方法 删除对应索引值的 频道</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接收子组件传来删除频道的id值 进行页面删除</span></span><br><span class="line">delChannel (id) &#123;</span><br><span class="line">  <span class="keyword">const</span> index = <span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 把页面上的频道列表 和 子组件传来的 频道id值 进行比对 findIndex方法 查询到其索引值进行删除</span></span><br><span class="line">    <span class="keyword">return</span> item.<span class="property">id</span> === id</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 根据索引 删除对应的页面频道数据</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">splice</span>(index, <span class="number">1</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>封装接口</li>
<li>绑定事件调用接口</li>
<li>删除频道（子向父组件传值，由父组件根据id删除频道）</li>
</ol>
<h2 id="添加我的频道-ChannelEdit-vue"><a href="#添加我的频道-ChannelEdit-vue" class="headerlink" title="添加我的频道 ChannelEdit.vue"></a>添加我的频道 <code>ChannelEdit.vue</code></h2><blockquote>
<p>目标：添加我的频道参数处理</p>
<p>效果: 点击添加按钮 添加频道 并且上传到服务器</p>
<p><big>注意:</big>   </p>
<ol>
<li><p>后端规定 添加列表需要上传排序 <code>seq</code> 给喜欢的频道添加序号（每个频道添加seq属性）</p>
</li>
<li><p>子组件添加的频道 传给父组件时候 需要用<code>map()</code>方法循环遍历添加符合 父组件条件的频道值 再传父组件</p>
</li>
<li><p>提交的数据不可以包含【推荐】频道</p>
</li>
</ol>
</blockquote>
<h3 id="封装-删除频道的-api接口-api文件夹-channel-js"><a href="#封装-删除频道的-api接口-api文件夹-channel-js" class="headerlink" title="封装 删除频道的 api接口 api文件夹 channel.js"></a>封装 删除频道的 api接口 <code>api文件夹 channel.js</code></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 添加频道</span></span><br><span class="line"><span class="comment">//! 添加频道的接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">addChannel</span> = (<span class="params">orderChannels</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;put&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/user/channels&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">channels</span>: orderChannels</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="子组件上传添加频道数据-并传值给父组件-ChannelEdit-vue"><a href="#子组件上传添加频道数据-并传值给父组件-ChannelEdit-vue" class="headerlink" title="子组件上传添加频道数据 并传值给父组件 ChannelEdit.vue"></a>子组件上传添加频道数据 并传值给父组件 <code>ChannelEdit.vue</code></h3><ul>
<li><code>template</code> 模板 <ul>
<li>携带喜欢频道的 详细数据 进行加工 符合父组件频道数据要求</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ! @click 点击事件 点击后 添加新的频道数据 携带频道的详细参数 --&gt;</span><br><span class="line">&lt;van-icon @click=&quot;addChannel(items)&quot; class=&quot;btn&quot; name=&quot;plus&quot;&gt;&lt;/van-icon&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本<ul>
<li>导入添加频道的api接口</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 导入获取全部频道数据删除频道 添加频道 的api接口</span></span><br><span class="line"><span class="keyword">import</span> &#123; getChannels, delChannel, addChannel &#125; <span class="keyword">from</span> <span class="string">&#x27;../api/channel&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> 函数方法<ul>
<li>组件实现添加频道功能<ul>
<li>绑定添加频道的按钮的点击事件</li>
<li>封装了添加频道的接口方法</li>
<li>准备添加频道调用接口的相关参数<ul>
<li>要求是数组，数组中放对象，对象中包含频道id和排序序号seq</li>
<li>seq作用：告诉后端，页面中频道的顺序</li>
<li>数组中要去掉【推荐】频道</li>
</ul>
</li>
<li>调用接口发送请求</li>
<li>如果调用接口成功，在我的频道中添加一个新的频道（点击的添加的频道）</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 设置添加频道的方法</span></span><br><span class="line">    <span class="comment">//! 因为无法获取后台seq顺号  只能前端排序让后端统一即可。(后端要求 新的频道总列表 添加序号上传后端)</span></span><br><span class="line">    <span class="comment">//! 后端需要 完整的排好序的 数组 [&#123;id,seq&#125;,...] 注意：不需要推荐</span></span><br><span class="line">    <span class="comment">//! 本地需要 &#123;id, name&#125; 利用map方法 往里面添加 频道序列号</span></span><br><span class="line">    addChannel (channel) &#123;</span><br><span class="line">      <span class="comment">//! 准备参数：对每一个现有频道进行排序（添加一个seq属性进行编号）；并且去掉【推荐】频道</span></span><br><span class="line">      <span class="comment">//! 先对之前的频道排序 利用map方法(包含index参数) 往里面添加 频道序列号</span></span><br><span class="line">      <span class="keyword">const</span> orderChannels = <span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          <span class="comment">//! 添加频道数据的id</span></span><br><span class="line">          <span class="attr">id</span>: item.<span class="property">id</span>,</span><br><span class="line">          <span class="comment">//! 添加频道数据的名称</span></span><br><span class="line">          <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line">          <span class="comment">//! 添加频道数据的 索引(map自带)</span></span><br><span class="line">          <span class="attr">seq</span>: index</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">      <span class="comment">//! 把点击的新频道 添加到map遍历的数组中 编号seq是map数组的长度</span></span><br><span class="line">      orderChannels.<span class="title function_">push</span>(&#123; <span class="attr">id</span>: channel.<span class="property">id</span>, <span class="attr">name</span>: channel.<span class="property">name</span>, <span class="attr">seq</span>: orderChannels.<span class="property">length</span> &#125;)</span><br><span class="line">      <span class="comment">//! 去除第一个【推荐】频道 splice 方法</span></span><br><span class="line">      orderChannels.<span class="title function_">splice</span>(<span class="number">0</span>, <span class="number">1</span>)</span><br><span class="line">      <span class="comment">//! 调用接口 通知服务器 添加频道的操作</span></span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="comment">//! 请求服务器 添加频道列表</span></span><br><span class="line">        <span class="title function_">addChannel</span>(orderChannels)</span><br><span class="line">        <span class="comment">//! 添加频道成功后，添加页码的频道(传给父组件 通知父组件更新数据)</span></span><br><span class="line">        <span class="comment">//! 因为首页的频道数据有额外的属性值 所以需要添加这些内容 传给父组件</span></span><br><span class="line">        <span class="keyword">const</span> newChannel = &#123;</span><br><span class="line">          <span class="comment">//! 频道的id</span></span><br><span class="line">          <span class="attr">id</span>: channel.<span class="property">id</span>,</span><br><span class="line">          <span class="comment">//! 频道的标签名称</span></span><br><span class="line">          <span class="attr">name</span>: channel.<span class="property">name</span>,</span><br><span class="line">          <span class="comment">//! 文章列表加载状态</span></span><br><span class="line">          <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">          <span class="comment">//! 下拉刷新的完成状态</span></span><br><span class="line">          <span class="attr">isLoading</span>: <span class="literal">false</span>,</span><br><span class="line">          <span class="comment">//! 上拉列表加载完成的标志</span></span><br><span class="line">          <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">          <span class="comment">//! 下拉刷新完成的提示信息</span></span><br><span class="line">          <span class="attr">pullText</span>: <span class="string">&#x27;加载成功&#x27;</span>,</span><br><span class="line">          <span class="comment">//! 时间戳，用于实现列表的分页查询</span></span><br><span class="line">          <span class="attr">timestamp</span>: +<span class="keyword">new</span> <span class="title class_">Date</span>(),</span><br><span class="line">          <span class="comment">//! 文章列表</span></span><br><span class="line">          <span class="attr">articles</span>: []</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//! 把新的频道数据传递给父组件，让父组件去添加到页面上</span></span><br><span class="line">        <span class="variable language_">this</span>.$emit(<span class="string">&#x27;addChannel&#x27;</span>, newChannel)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        <span class="comment">//! 通知用户</span></span><br><span class="line">        <span class="variable language_">this</span>.$toast(<span class="string">&#x27;添加失败&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<h3 id="父组件监听事件-进行添加频道-main-vue"><a href="#父组件监听事件-进行添加频道-main-vue" class="headerlink" title="父组件监听事件 进行添加频道 main.vue"></a>父组件监听事件 进行添加频道 <code>main.vue</code></h3><ul>
<li><code>template</code> 模板<ul>
<li>接收子组件 传来新的 频道数组(包括需求的属性名)</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- ?编辑频道组件 接收子组件传来的数据 --&gt;</span><br><span class="line">&lt;ChannelEdit @addChannel=&#x27;addChannel&#x27; @delChannel=&#x27;delChannel&#x27; v-model=&#x27;isEdit&#x27; :channels=&#x27;channels&#x27; :activeindex.sync=&#x27;active&#x27;&gt;&lt;/ChannelEdit&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> 函数方法<ul>
<li>把子组件传来的频道数组 添加到页面的频道数组里</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接收子组件传来的添加频道数据</span></span><br><span class="line">addChannel (channel) &#123;</span><br><span class="line">  <span class="comment">// 把传来的数据 添加到页面频道数组里</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">channels</span>.<span class="title function_">push</span>(channel)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>准备参数（对频道排序，去掉【推荐】频道）</li>
<li>调用接口添加频道</li>
<li>添加页面的频道</li>
</ol>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/10/Vue_Mobile_Projects/7_Channel/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/10/Vue_Mobile_Projects/7_Channel/";
            const title         = "「6. Vue移动端 频道列表编辑操作」";
            const excerpt       = `::: tip 介绍
Vue频道列表(Vant动作面板) 频道编辑操作(添加 删除):::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 5. Vue移动端 文章列表更多操作" href="/2021/06/09/Vue_Mobile_Projects/6_moreHome/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 7. Vue移动端 搜索功能设置" href="/2021/06/11/Vue_Mobile_Projects/8_search/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>